<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/1/29
  Time: 18:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>个人信息</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .panel{
            background-color: white;
            border-top: 3px solid rgb(60,141,188);
            border-radius: 4px;
            margin: 10px;
        }
    </style>
</head>
<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.4.1.js"></script>
<script src="/js/common.js" charset="utf-8"></script>
<body style="background-color: rgb(236,240,245);">
    <div style="padding: 10px">
        <h2>基本信息</h2>
        <input id="editOption" value="${editOption}" style="display: none">
        <div style="width: 25%;float: left">
            <div class="panel" style="">
                <div style="padding: 15px">
                    <div style="text-align: center">
                        <c:if test="${user.img == null}">
                            <img src="/img/defualt_headpotrait.png" style="width: 100px;border-radius: 100%">
                        </c:if>
                        <c:if test="${user.img != null}">
                            <img src="data:image/png;base64,${user.img_base65}" style="width: 100px;height:100px;border-radius: 100%">
                        </c:if>
                        <p style="font-size: 22px">${user.user_name}</p>
                        <p style="">${user.role.role_name}</p>
                    </div>
                    <hr class="layui-bg-blue">
                    <h2 style="margin-bottom: 10px">基本资料</h2>
                    <i class="layui-icon layui-icon-user" style="font-weight: bolder">部门</i>
                    <p style="color: gray">${user.dept_name}</p>
                    <hr>
                    <i class="layui-icon layui-icon-username" style="font-weight: bolder">职位</i>
                    <p style="color: gray">${user.position_name}</p>
                    <hr>
                    <i class="layui-icon layui-icon-read" style="font-weight: bolder">学历</i>
                    <p style="color: gray">${user.user_school}</p>
                    <hr>
                    <i class="layui-icon layui-icon-cellphone" style="font-weight: bolder">手机</i>
                    <p style="color: gray">${user.telephone}</p>
                    <hr>
                    <i class="layui-icon layui-icon-home" style="font-weight: bolder">地址</i>
                    <p style="color: gray">${user.address}</p>
                </div>
            </div>
        </div>
        <div style="float: left;width: 75%">

            <div class="panel" style="">
                <form id="frm_user" class="layui-form" action="/loginController/updateUser.do" method="post" enctype="multipart/form-data">
                    <h3 style="margin-left: 10px">个人设置</h3>
                    <hr>
                    <input name="user_id" value="${user.user_id}" style="display: none">
                    <!-- 第一排 -->
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: 45%">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-block">
                                <input id="user_name" name="user_name" required  lay-verify="required|username" value="${user.user_name}" autocomplete="off" class="layui-input" onchange="queryUserByName(this.value)">
                            </div>
                        </div>
                        <div class="layui-inline" style="width: 45%">
                            <label class="layui-form-label">电话</label>
                            <div class="layui-input-block">
                                <input name="telephone" value="${user.telephone}" lay-verify="phone" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <!-- 第二排 -->
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: 45%">
                            <label class="layui-form-label">真实姓名</label>
                            <div class="layui-input-block">
                                <input name="real_name" required  lay-verify="required|realname" value="${user.real_name}" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" style="width: 45%">
                            <label class="layui-form-label">Email</label>
                            <div class="layui-input-block">
                                <input name="email" value="${user.email}" lay-verify="email" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <!-- 第三排 -->
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: 45%">
                            <label class="layui-form-label">地址</label>
                            <div class="layui-input-block">
                                <input name="address" value="${user.address}" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" style="width: 45%">
                            <label class="layui-form-label">学历</label>
                            <div class="layui-input-block">
                                <select id="slt_education" name="education" lay-search required lay-verify="required" value="${user.education}">
                                    <option value="">请选择</option>
                                    <c:forEach var="item" items="${education}">
                                        <option value="${item.dictionary_fieldValue}">${item.dictionary_value}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- 第四排 -->
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: 45%">
                            <label class="layui-form-label">毕业院校</label>
                            <div class="layui-input-block">
                                <input name="user_school" value="${user.user_school}" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" style="width: 45%">
                            <label class="layui-form-label">身份证号</label>
                            <div class="layui-input-block">
                                <input name="idcard" required  lay-verify="required identity" value="${user.idcard}" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <!-- 第五排 -->
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: 45%">
                            <label class="layui-form-label">银行账号</label>
                            <div class="layui-input-block">
                                <input name="bankcard" value="${user.bankcard}" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" style="width: 45%">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <select id="slt_sex" name="sex" lay-search lay-verify="required" value="${user.sex}">
                                    <c:forEach var="item" items="${sex}">
                                        <option value="${item.dictionary_fieldValue}">${item.dictionary_value}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- 第六排 -->
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: 45%">
                            <label class="layui-form-label">皮肤</label>
                            <div class="layui-input-block">
                                <select id="slt_theme_skin" name="theme_skin" lay-search lay-verify="required" value="${user.theme_skin}">
                                    <option value="">请选择</option>
                                    <c:forEach var="item" items="${theme_skin}">
                                        <option value="${item.dictionary_fieldValue}">${item.dictionary_value}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <!-- 第七排 -->
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: 45%">
                            <label class="layui-form-label">新密码</label>
                            <div class="layui-input-block">
                                <input id="password" name="password" type="password" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" style="width: 45%">
                            <label class="layui-form-label">确认密码</label>
                            <div class="layui-input-block">
                                <input type="password" autocomplete="off" lay-verify="newPassword" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: 45%">
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn layui-btn-warm">
                                    <i class="layui-icon layui-icon-picture-fine" style="position: absolute;font-size: 37px;left: 6px"></i>
                                    <span style="position: absolute;left: 44px;font-size: 16px">上传头像</span>
                                    <input name="img" type="file" accept="image/*" style="width: 80px;height: inherit;opacity: 0" onchange="changImg(event)">
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: 45%">
                            <div class="layui-input-block">
                                <img id="image" src="/img/defualt_headpotrait.png" height="100px">
                            </div>
                        </div>
                    </div>
                    <!-- 功能按钮 -->
                    <div class="layui-form-item" style="text-align: center">
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submitBtn">保存</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<script>
    $(function () {

        showDefaultSelected();
        //页面加载完成判断是否是从编辑页面跳转过来的
        isShowSuccessPanel();
    });
    //form模块
    layui.use(['form','laydate'], function() {
        var form = layui.form;

        form.verify({
            username: function(value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[0-9a-zA-Z]+$").test(value)) {
                    return '用户名只能由英文和数字组成';
                }
            },
            realname: function(value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z\u4e00-\u9fa5]+$").test(value)) {
                    return '真实姓名只能存在中文和英文字母';
                }
            },
            newPassword: function(value, item) { //value：表单的值、item：表单的DOM对象

                if (value != $("#password").val()) {
                    return '两次密码不一致';
                }
            }
        });
    });

    /**
     * 选择头像后显示
     * @param e
     */
    function changImg(e){
        for (var i = 0; i < e.target.files.length; i++) {
            var file = e.target.files.item(i);
            //实例化FileReader API
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {
                $("#image").attr("src",e.target.result);  //显示图片
            }
        }
    }
    /**
     * 通过用户名查询用户
     * @param user_name
     */
    function queryUserByName(user_name) {

        $.ajax({
            url:"/loginController/queryUserByName.do",
            data:{
                user_name:user_name
            },
            dataType:"json",
            success:function (result) {

                if(result.code == 500){
                    layer.msg("用户名已存在！");
                    //清空输入框
                    $("#user_name").val("");
                }
            }
        });
    }
</script>
</html>
